<!DOCTYPE html>
<html>
<head>
#include("../../_common/head.html")
<title>角色列表</title>
</head>
<body class="pear-container">
    <div class="layui-panel query-panel /*查询面板*/">
        <form class="layui-form layui-row layui-col-space16" lay-filter="query-form" onsubmit="return false;">
        	<div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
				<div class="layui-input-wrap">
					<div class="layui-input-prefix">
						<i class="pear-icon pear-icon-text"></i>
					</div>
					<input type="text" name="word" value="#(word??)" placeholder="模糊查询" autocomplete="off" class="layui-input" lay-affix="clear">
				</div>
		    </div>
        	<div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
				<div class="layui-input-wrap">
                    <select name="status">
                        <option value="">-- 状态 --</option>
                    #DICTS('bean_status')#for(item : dicts)
                        <option value="#(item.value)"#if(status?? == item.value) selected#end>#(item.label)</option>
                    #end#end
                    </select>
                </div>
            </div>
            <div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
                <button type="button" class="pear-btn pear-btn-sm pear-btn-primary query-form-search">
                    <i class="layui-icon layui-icon-search"></i> 搜索
                </button>
                <button type="button" class="pear-btn pear-btn-sm query-form-reset">
                    <i class="layui-icon layui-icon-refresh"></i> 重置
                </button>
            </div>
        </form>
    </div>
    <div class="layui-panel data-panel /*数据面板*/">
        <table id="data-table" lay-filter="data-table"></table>
    </div>

#set(tableButtonsHtml = '')
#set(recordButtonsHtml = '')
#authPermissions('system:role:assignPermission', 'system:role:assignDataScope')
    #set(recordButtonsHtml = '<a class="pear-btn pear-btn-success pear-btn-xs" plain id="more_{{d.id}}" data-id="{{d.id}}"><i class="layui-icon layui-icon-triangle-d"></i>&nbsp;更多</a>') ### 自定义单记录按钮
#end
#include("../../_common/data_table_template.html"
    , customTableButtons = tableButtonsHtml
    , customRecordButtons = recordButtonsHtml
)

#include("../../_common/foot.html")

<script type="text/javascript">
/*
 * 定义权限开关
 */
var RIGHTS = { NONAME: null // 无用，占个位
//#authPermissions('system:role:add')
    ,add: true
//#end
//#authPermissions('system:role:edit')
    ,edit: true
//#end
//#authPermissions('system:role:del')
    ,remove: true
    ,batchRemove: true
//#end
//#authPermissions('system:role:query')
    ,detail: true
//#end
//#authPermissions('system:role:assignPermission')
    ,assignPermission: true
//#end
//#authPermissions('system:role:assignDataScope')
    ,assignDataScope: true
//#end

};

/*
 * 模块操作路径
 */
var MODULE_PATH = "#CTX()/admin/system/role/";

/*
 * 默认弹窗大小
 */
var POPUP_AREA = ['720px', '95%'];

/*
 * 数据表的OPTIONS
 */
var OPTIONS = {
    elem: '#data-table',
    url: MODULE_PATH + "query",
    method: "post",
    request: {pageName: 'pageNumber', limitName: 'pageSize' },
    initSort: {"field": "sort", "type": "asc"},
    page: true,
    height: 'full-95',
    toolbar: '#table-toolbar',
    defaultToolbar: [{title: "查询", layEvent: "toggle", icon: "layui-icon-search"}, 'filter'],
    size: 'sm',
    cols: [[
        {type: 'checkbox', align: 'center', width: 60},
        {field: 'status', align: 'center', width: 80, sort: true, title: '状态', templet: '#bean-status'},
        {field: 'name', align: 'left', minWidth: 150, width: '15%', sort: true, title: '角色名称'},
        {field: 'code', align: 'left', minWidth: 150, width: '15%', sort: true, title: '权限字符'},
        {field: 'sort', align: 'center', width: 80, sort: true, title: '排序'},
        {field: 'createdDatetime', align: 'center', width: 160, sort: true, title: '创建时间', templet: '#bean-createdDatetime'},
        {field: 'remark', align: 'left', minWidth: 200, width: '20%', title: '说明'},
        {toolbar: '#record-toolbar', align: 'left', minWidth: 240, title: '操作'}
    ]]
};
</script>

<script src="#CTX()/admin/js/query_form.js?_v=#VERSION()"></script>
<script src="#CTX()/admin/js/data_table.js?_v=#VERSION()"></script>

<script type="text/javascript">
/*
 * Layui相关脚本
 */
layui.use(['table', 'form', 'jquery', 'common', 'dropdown'], () => {
	var $ = layui.jquery, form = layui.form, common = layui.common;
    var datatable = layui.table; // 数据表格
	var dropdown = layui.dropdown;
	
	/*
     * OPTIONS的done方法在此定义，是因为它引用了此代码块引用的layui.dropdown
     */
    OPTIONS.done = (res, curr, count) => {
        for (var i = 0; i < res.data.length; i++) {
        	var data = [];
        	if(res.data[i].id != 1) {
        	//#authPermissions('system:role:assignPermission')
            data.push({title: "<i class='pear-icon pear-icon-security'></i>&nbsp;系统权限", menuId: 100, id: res.data[i].id});
        	//#end
        	//#authPermissions('system:role:assignDataScope')
        	data.push({title: "<i class='pear-icon pear-icon-lock'></i>&nbsp;数据权限", menuId: 101, id: res.data[i].id});
        	//#end
        	} else {
        		data.push({title: "-- 超级角色禁止操作 --"});
        	}
            dropdown.render({
                elem: '#more_' + res.data[i].id,
                data: data,
                id: '#more_' + res.data[i].id,
                click: function(obj) {
                    if (obj.menuId == 100) {
                        // 分配角色
                        window.dataTable.assignPermission(obj.id);
                    }
                    if (obj.menuId == 101) {
                        // 分配数据权限
                        window.dataTable.assignDataScope(obj.id);
                    }
                }
            });
        }
    }
	
    /*
     * 分配系统权限
     */
    window.dataTable.assignPermission = function(data) {
        layer.open({
            type : 2,
            title : "分配系统权限",
            content : MODULE_PATH + "assignPermission?id=" + data,
            maxmin : false,
            area : POPUP_AREA,
            closeBtn : 1,
            shadeClose : false,
            anim : 1,
            moveOut : false,
            resize : false,
            btn : [ '保存', '取消' ],
            yes : function(index, layero) {
                var iframeWindow = window['layui-layer-iframe' + index],
                submitID = 'data-save', // 此ID必须和弹出iframe窗口中提交按钮的ID和Filter值一致
                submit = layero.find('iframe').contents().find("#" + submitID);

                // 监听提交
                iframeWindow.layui.form.on('submit('+ submitID + ')', function(data) {
                    $.ajax({ // 用Ajax替换弹窗中的提交
                        url : MODULE_PATH + "assignPermission",
                        type : "put",
                        data : data.field, // 获取提交的数据
                        beforeSend : function(){layer.load();}, // 防止重复操作
                        complete : function(){layer.closeAll('loading');}, //解除防重复操作
                        success : function(result){
                            if(result.code == 200){
                                // 提交 Ajax 成功后，静态更新表格中的数据
                                window.dataTable.refresh(); // 数据表格刷新
                                layer.close(index); //关闭弹层
                            } else {
                                if(result.description){
                                    // Ajax调用成功，但后台返回失败信息
                                    layer.alert(result.description, {icon: 5});
                                } else {
                                    layer.alert("操作失败！", {icon: 2});
                                }
                            }
                        },
                        error : function (e) { // Ajax调用失败
                            layer.alert("操作失败：" + e.responseText, {icon: 2});
                        }
                    });
                    return false; // 一定要返回False来阻止弹出窗口中提交按钮的再次提交
                });

                submit.trigger('click'); // 这里触发弹出窗口的提交按钮
            }
        });
    }
    
    /*
     * 分配数据权限
     */
    window.dataTable.assignDataScope = function(data) {
        layer.open({
            type : 2,
            title : "分配数据权限",
            content : MODULE_PATH + "assignDataScope?id=" + data,
            maxmin : false,
            area : POPUP_AREA,
            closeBtn : 1,
            shadeClose : false,
            anim : 1,
            moveOut : false,
            resize : false,
            btn : [ '保存', '取消' ],
            yes : function(index, layero) {
                var iframeWindow = window['layui-layer-iframe' + index],
                submitID = 'data-save', // 此ID必须和弹出iframe窗口中提交按钮的ID和Filter值一致
                submit = layero.find('iframe').contents().find("#" + submitID);

                // 监听提交
                iframeWindow.layui.form.on('submit('+ submitID + ')', function(data) {
                    $.ajax({ // 用Ajax替换弹窗中的提交
                        url : MODULE_PATH + "assignDataScope",
                        type : "put",
                        data : data.field, // 获取提交的数据
                        beforeSend : function(){layer.load();}, // 防止重复操作
                        complete : function(){layer.closeAll('loading');}, //解除防重复操作
                        success : function(result){
                            if(result.code == 200){
                                // 提交 Ajax 成功后，静态更新表格中的数据
                                window.dataTable.refresh(); // 数据表格刷新
                                layer.close(index); //关闭弹层
                            } else {
                                if(result.description){
                                    // Ajax调用成功，但后台返回失败信息
                                    layer.alert(result.description, {icon: 5});
                                } else {
                                    layer.alert("操作失败！", {icon: 2});
                                }
                            }
                        },
                        error : function (e) { // Ajax调用失败
                            layer.alert("操作失败：" + e.responseText, {icon: 2});
                        }
                    });
                    return false; // 一定要返回False来阻止弹出窗口中提交按钮的再次提交
                });

                submit.trigger('click'); // 这里触发弹出窗口的提交按钮
            }
        });
    }
    
    /*
     * 页面加载完成时加载表格数据
     */
    $(document).ready(() => {
        window.dataTable.search();
    });
    
});
</script>
</body>
</html>
